<template>
	<view class="zancomment mt-5 uni-row uni-column">
		<!-- 点赞列表 -->
		<!-- <view class="zanlist uni-row uni-items-center uni-row-wrap">
			<uni-icons class="mr-5" style="padding-top: 2px;" type="heart" size="14" color="#596D95"></uni-icons>
			<text class="username font-16">张三,</text>
			<text class="username font-16">查理斯,</text>
			<text class="username font-16">王二麻,</text>
			<text class="username font-16">切尔西,</text>
			<text class="username font-16">张三,</text>
			<text class="username font-16">查理斯,</text>
			<text class="username font-16">王二麻,</text>
			<text class="username font-16">切尔西,</text>
			<text class="username font-16">张三,</text>
			<text class="username font-16">查理斯,</text>
			<text class="username font-16">王二麻,</text>
			<text class="username font-16">切尔西</text>
		</view> -->
		<!-- 评论列表 -->
		<view class="comment-list" v-if="isShow">
			<view v-if="comment_list.length> 0">
			<!--  <view class="comment-item uni-row uni-items-center uni-row-wrap" :id="'commentItem' + index" hover-class="comment-hover" :hover-stay-time="100" @click="toComment($event,item)" @longpress="deleteItem(index)" v-for="(item,index) in comment_list" :key="index">
				<text class="username font-16" v-if="!item.at_nick_name">{{item.nick_name.nick_name}}：</text>
				<text v-else>
					<text class="username font-16">{{item.nick_name.nick_name}} </text>
					<text class="font-16">回复</text>
					<text class="username font-16"> {{item.at_nick_name.nick_name}}：</text>
				</text>
			  	<text class="font-16">{{item.content}}</text>
			  </view> -->
			  <uni-swipe-action>
			  		<uni-swipe-action-item :right-options="options" @click="bindClick($event,index, item)" v-for="(item,index) in comment_list" :key="index" @change="swipeChange($event, index)" :show="item.show" :disabled="item.user_id != user_id || !user_id">
			  			<view class="comment-item uni-row uni-items-center uni-row-wrap" :id="'commentItem' + index" hover-class="comment-hover" :hover-stay-time="100" @click="toComment($event,item)">
			  				<text class="username font-16" v-if="!item.at_nick_name">{{item.nick_name.nick_name}}：</text>
			  				<text v-else>
			  					<text class="username font-16">{{item.nick_name.nick_name}} </text>
			  					<text class="font-16">回复</text>
			  					<text class="username font-16"> {{item.at_nick_name.nick_name}}：</text>
			  				</text>
			  				<text class="font-16">{{item.content}}</text>
			  			</view>
			  		</uni-swipe-action-item>
			  </uni-swipe-action>
			</view>
			<view v-else class="noData">
				暂无评论
			</view>
			<!-- <view class="comment-item uni-row uni-row-wrap" hover-class="comment-hover" :hover-stay-time="100" @click="toComment">
				<text class="username font-16">张三</text>
				<text class="font-16">回复</text>
				<text class="username font-16">查理斯：</text>
				<comment-text text="从视频上看，我感觉应该是网上随便截的图，包括文案！"></comment-text>
			</view> -->
		</view>
		<view class="comment-list">
			<view class="see-comment" @click="seeComment">{{isShow ? '收起评论' : '查看评论'}}</view>
		</view>
	</view>
</template>

<script>
	import CommentText from './comment-text.vue';
	import * as FindApi from '@/api/find'
	import store from '@/store/index.js'
	export default {
		props: {
			//帖子id
			id: {
				type: Number,
				default: 0
			},
			isRefresh:{
				type: Number,
				default: 0
			},
			// 获取滚动的高度
			scrollTop:{
				type: Number,
				default: 0
			},
		},
		components: {
			CommentText
		},
		data() {
			return {
				isShow: false,
				comment_list: [], // 评论列表
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				user_id: null
			}
		},
		watch: {
			id: {
			  handler(newVal) {
				console.log('数据变化:', newVal);
				if(newVal) {
					 // this.getCommentList() // 评论列表
				}
			  },
			  deep: true, // 深度监听
			},
		    // 监听 isRefresh 的变化
			isRefresh: {
				handler(newVal, oldVal) {
	                if(newVal == this.id) {
						console.log(`Double Count changed from ${oldVal} to ${newVal} ${this.id}`);
						this.getCommentList() // 评论列表
					}
				},
				deep: true, // 深度监听
				// immediate: true // 立即执行
			}
		},
		mounted() {
			const app = this
			this.user_id = store.getters.userId
		},
		methods: {
			// 评论列表
			getCommentList: function() {
				const app = this
				FindApi.postsComment({
					"page":1,
					"id": app.id, // 帖子id
				}).then(result => {
					console.log(result,'result')
					app.comment_list = result.data.items
				})
			},
			toComment (e, val) {
				console.log('评论信息列表',e,val)
				uni.$emit('commentScrollEvent', {top: e.detail.y,id: val.posts_id, at_id: val.user_id, nick_name: val.nick_name.nick_name});
			},
			// 删除评论
			deleteItem(index) {
				console.log('删除评论')
				let app = this
				this.$nextTick(() => {
					let commentIcon = null; // 获取子组件实例
					const query = uni.createSelectorQuery().in(this).select('#commentItem'+index);
					   query.boundingClientRect((data) => {
						console.log("得到布局位置信息line" + JSON.stringify(data));
						if (data) {
							uni.$emit('showDetetePopup', {top: data.top + app.scrollTop, id: app.id, at_id: 0});
						}
					  }).exec();
				})
			},
			// 查看评论
			seeComment() {
				this.isShow = !this.isShow
				if(this.isShow) {
					console.log(this.id)
					this.getCommentList() // 评论列表
				}
			},
			
			swipeChange(e, index) {
				console.log('当前状态：' + e + '，下标：' + index, this.comment_list[index].user_id == this.user_id)
				this.comment_list[index].show = e;
				this.comment_list.map((val, idx) => {
					if(index != idx) this.comment_list[idx].show = 'none';
				})
			},
			bindClick(e, index, val) {
				console.log('点击了',e, index);
				const app = this
				let {
					content
				} = e;
				if (content.text === '删除') {
					console.log('帖子id', val.id)
					// 判断只有当前用户才能删除自己的评论
					if(val.user_id == app.user_id) {
						// 弹窗告诉用户是否删除
						uni.showModal({
						  title: '提示',
						  content: '是否确定删除？',
						  // showCancel: false,
						  confirmText: "确定",
						  cancelText: "取消",
						  success: res => {
							 if (res.confirm) {
								 FindApi.postsCommentDeleted({
								 	id: val.id, // 帖子id
								 }).then(result => {
								 	console.log(result,'result')
									app.$toast('删除成功')
									val.show = 'none';
								 	app.getCommentList() // 评论列表
								 })
							 } else {
							 	app.$toast('删除取消')
							 }
						  },
						  fail: err => {
						  	console.log('删除失败')
						  }
						})
					} else {
						val.show = 'none'
						app.$toast('您没有权限删除')
					}
				}
			},
		}
	}

</script>

<style scoped lang="scss">
.zancomment {
	background-color: #F7F6F7;
	border-radius: 10rpx;
	margin-top: 30rpx;
	.username {
		color: #596D95;
	}
	
	.zanlist {
		padding: 10rpx 20rpx;
	}
	
	.comment-list {
		border-top: 1rpx solid #eee;
		.see-comment{
			text-align: center;
			line-height: 50rpx;
		}
		.comment-item {
			padding: 10rpx 20rpx;
		}
		.noData{
			text-align: center;
			margin:40rpx 0;
			font-style: italic;
		}
	}
}
	
.comment-hover { 
	background-color: #ddd;
}
</style>